<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5.v-model</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <span>输入text内容：</span>
        <input type="text" v-model="message" placeholder="请输入内容">
        <p>message内容:{{message}}</p>
        <br>
        <span>输入textarea内容：</span>
        <textarea v-model="message1" placeholder="add multiple lines"></textarea>
        <p>message1内容:{{message1}}</p>
        <br>
        <span>复选框</span>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <p>复选框内容：{{checkedNames}}</p>
        <br>
        <span>单选框</span>
        <input type="radio" id="cat" value="小猫" v-model="animal">
        <label for="cat">小猫</label>
        <input type="radio" id="dog" value="小狗" v-model="animal">
        <label for="dog">小狗</label>
        <p>单选框内容：{{animal}}</p>
        <br>

        <span>下拉框1</span>
        <select v-model="selected1">
            <option v-for="option in options1">{{option}}</option>
        </select>
        <p>下拉框选择：{{selected1}}</p>
        <br>

        <span>下拉框2</span>
        <select v-model="selected2">
            <option v-for="option in options2" :value="option.value">{{option.text}}</option>
        </select>
        <p>下拉框选择:{{selected2}}</p>
        <br>

        <button type="button" @click="submit">提交message</button>


    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '',
                message1: '',
                checkedNames:[],
                animal:'',
                selected1:'',
                selected2:'',
                options1: ['A','B','C'],
                options2: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
                ]
            },
            methods:{
                submit:function(){
                    console.log(this.message)
                }
            }
        })
    </script>
</body>

</html>